<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#msg{margin: 50px;
			font-size: 50px; 
			}
			.btnstyle{margin: 0px 0px 0px 50px;
			
			
			
		</style>
	</head>
	<body>
		<div id="msg">0</div>
		<div class="btnstyle"></div>
			<button id="btnStart" onclick="start()">开始计时</button>
			<button id="btnStop" onclick="stop()">结束计时</button>

	</body>
	<script>
		var count=0;
		var timer;
		var clickstart=1;
		// var clickStart=0;
		var msg=document.getElementById("msg");
		var btnStart=document.getElementById("btnStart");
		var btnStop=document.getElementById("btnStop");
		
		//点就开始，计时器定时刷新+n，按钮名称：暂停计时
		function start(){
			count=count+1;
			
			
			
			if(clickstart%2!=0){
				timer=setInterval(function(){
					count++;
					msg.innerText=count;
					},10);
								
			btnStart.innerText="暂停计时";
			
		}else{
			clearInterval(timer);
			// clickstart=1;
			btnStart.innerText="继续计时";
			}
			clickstart++;
			}
			

		//点击结束，清除定时器，总值=0，按钮名称：开始计时
		function stop(){
			
			count=0;
			clearInterval(timer);
			msg.innerText=count;
			
		btnStart.innerText="开始计时";
		}

		// function start(){
			
		// 	clickStart++;
			
		// 	if(clickStart %2 == 0){
		// 		clearInterval(timer);
		// 		btnStart.innerHTML = '继续计时';
		// 		clickStart = 0;
		// 	}else{
		// 		timer = setInterval(function(){
		// 			count += 1;
		// 			msg.innerHTML = count;
		// 		}, 10);
		// 		btnStart.innerHTML = '暂停计时';
		// 	}
		// }
		
		// function stop(){
		// 	clearInterval(timer);
		// 	count = 0;
		
		// 	msg.innerHTML = count;
		// 	btnStart.innerText="开始计时";
		// }
		//一个页面中可以有多个定时任务setInterval
		//要给定时任务起名方便定向清除

	</script>
</html>
